import { useDispatch, useSelector } from "react-redux"
import { List, IndexBar, Tag, SearchBar, Empty } from "antd-mobile"
import { useEffect, useState } from 'react'
import { AppDispatch, RootReducer } from "../../../types/store"
import { chnageDw, getCityInfo } from "../../../rtk/reduers/data"
import { MyHead } from "../../../components/head"
import '../../../styles/homes/city.scss'
const Citys = () => {
    const cityData = useSelector<RootReducer, cityListDataTypes[]>(state => state.MyData.cityData)
    const dispatch: AppDispatch = useDispatch()
    const [visible, setVisible] = useState(true)
    const charCodeOfA = 'A'.charCodeAt(0)
    const [searchList,setSearchList] = useState<cityListDataTypes[]>([]);

    const ints = ()=>{
        setVisible(false)
    }
    const changes = (v:string)=>{
        v.trim()? 
        setSearchList(cityData.filter(item=>(item.name.includes(v)) || (item.pinyin.includes(v))))
        :
        setSearchList([])
    }
    const blrs = ()=>{
        setVisible(true)
        
    }
    const chooseCity = (v: string) => {

        dispatch(chnageDw(v))
    }
    const groups = Array(26)
        .fill('')
        .map((_, i) => ({
            title: String.fromCharCode(charCodeOfA + i),
        }))  // 26 个字母 

    useEffect(() => {
        dispatch(getCityInfo())
    }, [])
    return (
        <div >
            <MyHead title='城市选择' />
            <div style={{ height: window.innerHeight }} className="list">

                <SearchBar placeholder='请输入内容' showCancelButton style={{ margin: '0 10px' }}  onChange={changes} onFocus={ints} onBlur={blrs}/>

                {visible && <div className="hotcity" style={{ marginTop: 15 }}>
                    <div></div>
                    <p>热门城市</p>
                    <div>
                        {
                            cityData.filter((item) => item.isHot == 1).map((v, index) => {
                                return <Tag onClick={() => chooseCity(v.name)} color="#2db7f5" key={index} style={{ padding: '10px 15px', margin: '10px 10px 10px 0px' }}>
                                    {v.name}
                                </Tag>
                            })
                        }
                    </div>
                </div>
                }
                {visible &&
                    <IndexBar >
                        {groups.map(zm => {
                            const { title } = zm
                            return (
                                <IndexBar.Panel
                                    index={title}
                                    title={`标题${title}`}
                                    key={`标题${title}`}
                                >
                                    <List>
                                        {(cityData.filter(item => item.pinyin[0].toLocaleUpperCase() == title)).map(item => (
                                            <List.Item key={item.cityId} onClick={() => chooseCity(item.name)}>{item.name}</List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            )
                        })}
                    </IndexBar>
                }
                {
                    visible || <div>
                        {
                            searchList.length>0  ?
                            <List>
                                {
                                    searchList.map((obj,i)=>{
                                        return (
                                            <List.Item key={i}  onClick={()=>chooseCity(obj.name)}>
                                                {obj.name}
                                            </List.Item>
                                        )
                                    })
                                }
                            </List>
                            :
                            <Empty
                                style={{ padding: '64px 0' }}
                                imageStyle={{ width: 128 }}
                                description='没有搜索对应的数据'
                            />
                        }
                    </div>
                }
            </div>

        </div>
    )
}

export default Citys

